[ Vue.js ] 環境建置

11th鐵人賽 javascript vue.js

ShawnL

2019-09-05 10:24:05

18774 瀏覽

分享至

學習完 Vue 之後，想要透過單元測試守護你的專案，但又不知道從何起手？
別擔心，快來訂閱作者最新系列文《小白也能輕鬆瞭解的 Vue3 單元測試！》
讓你的 Vue 專案更上一層樓！

環境搭建

一般來說建置 Vue.js 的完整專案會使用 Vue-cli 工具來產生專案目錄，但如果只是想要快速學習 Vue.js 不必安裝過多的環境，Vue.js 的官網提供了 CDN 的作為引入方式，讓有興趣的人可以更快參與其中，而目前提供的版本分別為：

開發版本：這個版本包含了完整的開發人員工具以及提示報錯等等的協助，適合開發時使用。
生產版本：這個版本則是將上述開發工具都拔除，盡量縮小它的體積，適合正式發布時使用。

而我們目的是體驗 Vue.js 的開發，因此選擇開發版本，並將其導入 HTML 的 head 中即可：

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

接著在 HTML 的部分我們需要建立一個元素並選擇性使用 class 或 id，讓待會 Vue.js 知道它要渲染的範圍。

<body>
  <div id="app">

  </div>
  <script>
      // 待會用來初始化 Vue 的地方
  <script>
<body>

在 JavaScript 部分，我們需要初始化 Vue.js 的實體，就好像飲料販賣機一樣，投個硬幣拿到這個商品後我們就可以開始使用它。透過 new 初始化 Vue 的物件之後，傳入一些基本的設定，其中 el 的值需要放入綁定的元素好比上方範例中的（app）；而 data 的值則是傳入一個物件，這裡主要是用來存放資料的部分，而 key（message）的部分將會用在樣板語法中供 Vue.js 去找到對應的 value（'Hello, Vue.js!'）最後將它顯示出來。

var vm = new Vue({
  el:'#app',
  data:{
    message:'Hello, Vue.js!'
  } 
})

最後，我們在剛才的 HTML 部分中使用樣板語法（兩對花括弧），裡面塞入剛才的 key（message），就可以將其對應的 'Hello, Vue.js!' 渲染出來：

<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
     var vm = new Vue({
      el:'#app',
      data:{
        message:'Hello, Vue.js!'
      } 
    })
  </script>
<body>

如此一來，將頁面打開來時就能看到 Hello, Vue.js!了。~~找回最初的感動（？~~